// 路由的匹配规则

// import Home from "@/views/Home";
// import About from "@/views/About";
// import Blog from "@/views/Blog";
// import BlogDetail from "@/views/Blog/Detail";
// import Project from "@/views/Project";
// import Message from "@/views/Message";

import "nprogress/nprogress.css";
import { start, done, configure } from "nprogress"; // 使用具名导出是为了减小体积, 不需要部分的不导出
import NotFound from "@/views/NotFound.vue"; // 404页面

configure({
  trickleSpeed: 15, // 进度条
  showSpinner: false, // 进度条右侧小圈圈
});

window.start = start;
window.done = done;

function delay(duration) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}

// pageCompResolve是一个函数, 之所以传函数而不是地址, 是为了让webpack能分析出组件的依赖关系
function getPageComponent(pageCompResolve) {
  // 异步组件, 有一个好处是不会重复加载, 加载完后再切换到同一个页面就不需要再加载
  return async () => {
    // console.log("组件开始加载");
    start();
    if (process.env.NODE_ENV === "development") {
      // 开发环境
      // process是node环境的, 这里之所以浏览器环境能使用是因为vue-cli在打包结果里注入了一些代码
      // await delay(500); // 页面加载前的等待时间, 用于观察页面顶部的进度条在网速较慢时是否有效
    }
    // 生产环境
    const comp = await pageCompResolve();
    // console.log("组件加载完成");
    done();
    return comp;
  };
}

export default [
  // 使用import的动态导入[路由懒加载], 可以对项目包进行分包, 从而把不同页面的代码打包到不同文件中
  {
    name: "Home",
    path: "/",
    // component: Home,
    component: getPageComponent(() =>
      import(/* webpackChunkName: "about" */ "@/views/Home") // 动态import返回的是一个promise
    ),
    meta: { title: "首页" },
  },
  {
    name: "About",
    path: "/about",
    // component: About,
    component: getPageComponent(() => import(/* webpackChunkName: "about" */ "@/views/About")),
    meta: { title: "关于我" },
  },
  {
    name: "Blog",
    path: "/article",
    component: getPageComponent(() => import(/* webpackChunkName: "blog" */ "@/views/Blog")),
    meta: { title: "文章" },
  },
  {
    name: "CategoryBlog",
    path: "/article/cate/:categoryId",
    // :xxx部分表示动态匹配[可以匹配多个,如 :xxx/:xxx/:xxx], 在vue-router中, 通过this.$route.params可获取匹配的全部属性构成的对象, 每个的属性名为:后的字符串
    component: getPageComponent(() => import(/* webpackChunkName: blog */ "@/views/Blog")),
    meta: { title: "文章" },
  },
  {
    name: "BlogDetail",
    path: "/article/:id",
    component: getPageComponent(() =>
      import(/* webpackChunkName: "blogdetail" */ "@/views/Blog/Detail")),
    meta: { title: "文章详情" },
  },
  {
    name: "Project",
    path: "/project",
    component: getPageComponent(() =>
      import(/* webpackChunkName: "project" */ "@/views/Project")),
    meta: { title: "项目&效果" },
  },
  {
    name: "Message",
    path: "/message",
    component: getPageComponent(() =>
      import(/* webpackChunkName: "message" */ "@/views/Message")),
    meta: { title: "留言板" },
  },
  {
    name: "NotFound",
    path: "*", // 通配符, 意思是前面的路由都没有匹配, 就会被这部分匹配
    component: NotFound, // 因为这个组件体积小就没有用路由懒加载
  }
];
// 给路由设置名字后, 当路径发生改变, 也不会影响页面
// [但RouterLink组件中的to属性需要使用name值跳转, 例-- > : to = "{ name: 'Home' }"]
